<!-- 框组件 -->
<template>
  <el-form
    :model="form"
    ref="form"
    :label-width="labelWidth"
    :inline="inline"
    :disabled="disabled"
  >
    <template>
      <template
        v-for="{
          label,
          prop,
          filterType,
          options,
          editable,
          picBase,
          placeCode,
          time,
        } in formItems"
      >
        <!--  -->
        <template v-if="$scopedSlots[prop]">
          <slot v-bind="{ form, label, options }" :name="prop" />
        </template>
        <!-- 时间选择器 -->
        <template v-else-if="filterType === 'timeRange'">
          <el-form-item :label="label" :key="prop">
            <el-date-picker
              v-model="form[prop]"
              type="datetimerange"
              :picker-options="pickerOptions"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </template>
        <template v-else-if="filterType === 'dateTime'">
          <el-form-item :label="label" :key="prop">
            <el-date-picker
              type="datetime"
              v-model="form[prop]"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始时间"
            >
            </el-date-picker>
          </el-form-item>
        </template>

        <!-- 选择器 -->
        <template v-else-if="filterType === 'select'">
          <el-form-item :label="label" :key="prop">
            <el-select
              v-model="form[prop]"
              :disabled="isEnableEditable && !editable"
              :style="{ width: formItemWidth }"
              clearable
              placeholder
            >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>

        <template v-else-if="filterType === 'placeholder'">
          <slot name="placeholder" />
        </template>
        <template v-else-if="filterType === 'textarea'">
          <el-form-item :label="label" :key="prop">
            <el-input
              type="textarea"
              autosize
              v-model="form[prop]"
              :disabled="isEnableEditable && !editable"
              :style="{ width: formItemWidth }"
              clearable
            ></el-input>
          </el-form-item>
        </template>

        <!-- 单选框 -->
        <template v-else-if="filterType === 'radio'">
          <el-form-item :label="label" :key="prop">
            <el-radio
              v-model="form[prop]"
              from
              v-for="item in options"
              :key="item"
              :label="item"
            ></el-radio>
          </el-form-item>
        </template>
        <!-- 多选框 -->
        <template v-else-if="filterType === 'Checkbox'">
          <el-form-item :label="label" :key="prop">
            <el-checkbox-group v-model="checkBox">
              <el-checkbox
                v-for="item in options"
                :key="item"
                :label="item"
                @change="getAuthority"
              >
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </template>

        <!-- 获取本地图片，并转为base64（不上传图片，仅预览） -->
        <template v-else-if="filterType === 'picture'">
          <el-form-item :label="label" :key="prop">
            <div>
              <el-button
              icon="el-icon-upload"
              onclick="document.getElementById('file').click()">
              选择文件
              </el-button>
            </div>
            <input
              id="file"
              type="file"
              class="file-btn"
              ref="fileBtn"
              style="display: none"
              @change="uploadImg($event)"
              accept="image/*"
            />
            <el-image
            style="width:450px;margin-left:0px"
            :src="pictureUrl"
            >
            <div slot="error" class="image-slot">
              <i
              class="el-icon-picture"
              style="font-size:200px;color:#598bd5" >
              </i><br>
            </div>
            </el-image>
          </el-form-item>
        </template>

        <template v-else-if="filterType === 'pic'">
          <el-form-item :label="label" :key="prop" style="width: 200px">
            <el-button
              class="pic_button_images"
              style="margin-top: -10%"
              type="text"
              @click="show(placeCode, prop, time)"
            >
              <el-image style="width: 200px" :src="picBase">
                <div slot="error" class="image-slot">
                  <i class="el-icon-loading"></i>
                </div>
              </el-image>
            </el-button>
            <el-dialog
              style="text-align: center"
              title="区域人流量展示"
              :visible.sync="dialogShow"
              :before-close="cancel"
            >
              <span style="font-weight: bold">区域人流量:{{ count }}</span>
              <el-image style="width: 100%" :src="cameraPicture">
                <div slot="error" class="image-slot">
                  <i class="el-icon-loading"></i>
                </div>
              </el-image>
            </el-dialog>
          </el-form-item>
        </template>

        <!-- input 和 slot -->
        <template v-else-if="filterType === 'input'">
          <el-form-item :label="label" :key="prop">
            <!-- <slot v-bind="{ form }" :name="prop"> -->
            <!-- <div style="width: 200px"> -->
            <el-input
              v-model="form[prop]"
              :disabled="isEnableEditable && !editable"
              :style="{ width: formItemWidth }"
              clearable
            ></el-input>
            <!-- </div> -->
            <!-- </slot> -->
          </el-form-item>
        </template>
      </template>
      <el-form-item>
        <slot name="oprations" />
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import { getCameraPic } from '@/api/venue'
// import prop from 'ramda/src/prop'
// import dayjs from 'dayjs'
export default {
  // isEnableEditable:  是否启用 每行数据的 editable,
  // 因为如果启用 editable, 当使用的 columns是一个对象时, 会对其他的 form( 比如全局筛选的 form) 有影响
  props: [
    'formItems',
    'form',
    'labelWidth',
    'disabled',
    'inline',
    'isEnableEditable',
    'formItemWidth'
  ],
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      pictureUrl: '',
      cameraPicture: '',
      count: 0,
      checkBox: [],
      dialogShow: false
    }
  },
  methods: {
    // 解决 vue {{}} 中不支持 ?? 的问题, 双问号 判断 0 为 true
    format(value) {
      return value ?? '--'
    },

    // 返回有效值, 排除null, undifind 等值, 但包括 0
    returnEffectiveVal(value) {
      return value ?? false
    },
    //  拿到本地图片并转码
    async uploadImg(e) {
      console.log(e.target)
      var that = this
      // 获取上传的文件
      const inputFile = e.target.files[0]
      // let inputFile = await that.$refs.fileBtn.files[0];    获取不到图片信息不知道为啥
      // let res
      if (inputFile) {
        // 使用FileReader去读取file对象
        const reader = new FileReader()
        reader.readAsDataURL(inputFile)// 这个不加就不能显示图片
        reader.onloadend = function() {
          var strBase64 = reader.result.substring(0)
          that.pictureUrl = strBase64
          var pic = strBase64.replace(/^data:image\/\w+;base64,/, '')
          that.form.PlaceImage = pic
        }
      } else {
        alert('上传失败')
      }
    },
    getAuthority() {
      this.form.Authority = this.checkBox
    },
    getCameraPicture(placeCode, prop, time) {
      getCameraPic(placeCode, prop, time).then(res => {
        if (res.data.result === 'true') {
          this.cameraPicture = 'data:image/jpg;base64,' + res.data.image
          this.count = res.data.count
        }
      })
    },
    //  区域人流量弹窗
    show(placeCode, prop, time) {
      this.getCameraPicture(placeCode, prop, time)
      this.dialogShow = true
    },
    cancel() {
      this.dialogShow = false
      this.cameraPicture = ''
    }
  }
}
</script>
<style scoped>
.pic_button_images >>> .el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-top: -50px;
}
</style>
